<template>
  <div>
    <el-button
      v-if="
        moduleNameOptions &&
          activePageForm &&
          activePageForm.activeModuleIndex != null &&
          (!moduleNameOptions[
            activePageForm.modules[activePageForm.activeModuleIndex].type
          ].maxSize ||
            activePageForm.modules[activePageForm.activeModuleIndex].modules
              .length <
            moduleNameOptions[
              activePageForm.modules[activePageForm.activeModuleIndex].type
            ].maxSize)
      "
      type="primary"
      size="small"
      round
      @click="addProduct"
    >新增内容
    </el-button>

    <!-- <div
      v-if="activePageForm.modules[activePageForm.activeModuleIndex].modules.length == 0"
      class="empty-tips"
    >
      未配置数据
    </div> -->
    <template>
      <ul style="margin-top: 20px">
        <draggable :list="menuList" :options="{ filter: '.undrag' }">
          <li
            v-for="(item, index) in menuList"
            :key="index"
            class="link-container"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <div class="flexRBC">
                  <div>
                    {{ item.menuName }}
                  </div>
                  <div>
                    <el-button
                      size="mini"
                      round
                      type="primary"
                      @click="edit(item, index)"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      round
                      type="danger"
                      @click="del(menuList, index)"
                    >删除</el-button>
                    <el-button v-if="menuList.length > 1" size="mini" round>拖拽排序</el-button>
                  </div>
                </div>
              </div>
              <ul
                v-if="item.type == 0 || item.type == 1"
                ref="shelfGoodsList "
                class="goods-list"
              >
                <div v-if="item.type == 0">
                  <draggable
                    :list="typeData(item, item.type)"
                    :options="{ filter: '.undrag' }"
                    @change="draggableChange(index)"
                  >
                    <li
                      v-for="(subItem, subIndex) in typeData(item, item.type)"
                      :key="subIndex"
                      class="cell-item flexRBC"
                    >
                      <div class="flexRSC">
                        <img
                          :src="fileBaseUrl + subItem.coverImg"
                          class="cover-img"
                        >
                        <div>
                          <div class="goods-name">{{ subItem.title }}</div>
                          <div>{{ subItem.category.join(" > ") }}</div>
                        </div>
                      </div>
                      <div>
                        <el-button v-if="typeData(item, item.type).length > 1" size="mini" round>拖拽排序 </el-button>
                      </div>
                    </li>

                  </draggable>
                </div>
                <div v-if="item.type == 1">
                  <draggable
                    :list="typeData(item, item.type)"
                    :options="{ filter: '.undrag' }"
                    @change="draggableChange(index)"
                  >
                    <li
                      v-for="(subItem, subIndex) in typeData(item, item.type)"
                      :key="subIndex"
                      class="cell-item flexRBC"
                    >
                      <div class="flexRSC">
                        <div>
                          <div>{{ subItem.names.join(" > ") }}</div>
                        </div>
                      </div>
                      <div>
                        <el-button v-if="typeData(item, item.type).length > 1" size="mini" round>拖拽排序 </el-button>
                      </div>
                    </li>

                  </draggable>
                </div>

              </ul>

              <ul
                v-if="item.type == 2"
                ref="shelfGoodsList "
                class="goods-list"
              >
                <div v-for="(subItem, subIndex) in item.goodsMenuForms" :key="subIndex">
                  <div style="padding: 10px; font-weight: bold;">{{ subItem.menuName }}</div>
                  <div v-if="subItem.type == 0">
                    <draggable
                      :list="typeData(subItem, subItem.type)"
                      :options="{ filter: '.undrag' }"
                      @change="draggableChange(index)"
                    >
                      <li
                        v-for="goodsItem in typeData(subItem, subItem.type)"
                        :key="goodsItem.goodsId"
                        class="cell-item flexRBC"
                      >
                        <div class="flexRSC">
                          <img
                            :src="fileBaseUrl + goodsItem.coverImg"
                            class="cover-img"
                          >
                          <div>
                            <div class="goods-name">{{ goodsItem.title }}</div>
                            <div>{{ goodsItem.category.join(" > ") }}</div>
                          </div>
                        </div>
                        <div>
                          <el-button v-if="typeData(subItem, subItem.type).length > 1" size="mini" round>拖拽排序 </el-button>
                        </div>
                      </li>
                    </draggable>
                  </div>
                  <div v-if="subItem.type == 1">
                    <draggable
                      :list="typeData(subItem, subItem.type)"
                      :options="{ filter: '.undrag' }"
                      @change="draggableChange(index)"
                    >
                      <li
                        v-for="goodsItem in typeData(subItem, subItem.type)"
                        :key="goodsItem.goodsId"
                        class="cell-item flexRBC"
                      >
                        <div class="flexRSC">

                          <div>
                            <div>{{ goodsItem.names.join(" > ") }}</div>
                          </div>
                        </div>
                        <div>
                          <el-button v-if="typeData(subItem, subItem.type).length > 1" size="mini" round>拖拽排序 </el-button>
                        </div>
                      </li>
                    </draggable>
                  </div>
                </div>
              </ul>
            </el-card>
          </li>
        </draggable>
      </ul>
    </template>
    <DialogProduct ref="dialogProduct" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import draggable from 'vuedraggable'
import DialogProduct from './DialogProduct'
import { getMenu, saveMenu } from '@/views/wxaBuildModule/api/store'
import wxaBuildConfig from '@/views/wxaBuildModule/config'
export default {
  components: {
    DialogProduct,
    draggable
  },
  data() {
    return {
      moduleNameOptions: null,
      classifyCode: 'DEFAULT',
      menuList: [],
      menuIndex: 0
    }
  },
  computed: {
    ...mapGetters(['activePageForm', 'fileBaseUrl']),
    typeData() {
      return (data, type) => {
        if (type == 0) {
          return data.goodsList
        } else if (type == 1) {
          return data.categoryList
        }
      }
    }
  },
  watch: {
    menuList() {
      const { biz } = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      const menuIdList = []
      this.menuList.forEach(item => {
        menuIdList.push(item.menuId)
      })
      biz.params.menuIdList = menuIdList
    }
  },
  mounted() {
    this.dumpTypeOptions = wxaBuildConfig[this.classifyCode].dumpType
    this.moduleNameOptions = wxaBuildConfig[this.classifyCode].moduleName
    this.fetchData()
  },
  methods: {
    fetchData() {
      const { biz } = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      const menuIdList = biz.params.menuIdList
      if (!menuIdList || !menuIdList.length) return
      getMenu(menuIdList)
        .then(res => {
          this.menuList = res.data
        })
    },
    draggableChange(index) {
      saveMenu(this.menuList[index])
        .then(res => {
          console.log(res)
        })
    },
    del(data, index) {
      data.splice(index, 1)
    },
    edit(row, index) {
      this.$refs.dialogProduct.open({ mode: 'edit', row }).then((res) => {
        this.menuList[index] = res
        this.$forceUpdate()
      })
    },
    addProduct() {
      this.$refs.dialogProduct.open({ mode: 'add' }).then((res) => {
        this.menuList = this.menuList.concat(res)
        const { biz } = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
        const menuIdList = []
        this.menuList.forEach(item => {
          menuIdList.push(item.menuId)
        })
        biz.params.menuIdList = menuIdList
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 覆盖样式 */
::v-deep {
  .el-card__body {
    padding: 10px 20px;
  }

  .el-card__header {
    padding: 10px 20px;
  }
}

.link-container {
  margin-top: 20px;
}

/* 无数据 */
.empty-tips {
  margin-top: 100px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

/* 商品列表 */
.goods-list {
  // display: flex;
  font-size: 14px;
  color: #606266;

  .cell-item {
    margin-bottom: 10px;

    .cover-img {
      display: block;
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }

    .goods-name {
      margin-bottom: 5px;
      color: #303030;
    }
  }
}

/* 货架 */
.shelf-container {
  margin-top: 10px;
  cursor: move;

  .title-bg {
    width: 188px;
    height: 33px;
  }

  /*  类目列表 */
  .category-list {
    color: #606266;
    font-size: 14px;

    .cell-item:not(:first-child) {
      margin-top: 10px;
    }
  }
}

/* 排序 */
.el-icon-rank {
  cursor: pointer;
  font-size: 20px;
  margin-right: 10px;
}
</style>
